<!--给点线面绑定属性，人员，设置姓名，样式-->
<div class="set-content">
    <div class="drae-save">
        <div class="check">
            <button class="pointe" nz-button nzType="primary" nzShape="circle" (click)="drawFinish()">
                <i nz-icon nzType="check" nzTheme="outline"></i>
            </button>
        </div>
        <div class="close">
            <button class="pointe" nz-button nzType="primary"  nzShape="circle" (click)="drawClose()">
                <i nz-icon nzType="close" nzTheme="outline"></i>
            </button>
        </div>
    </div>
    <div class="attribute-header">
        <div class="attr-title">属性</div>
        <div class="creater">创建人：{{creatUser}}</div>
        <div class="layers-base">
            <div class="layers-name">{{layerName}}</div>
            <div class="creat-time">{{creatTime}}</div>
        </div>
    </div>

    <div class="set-data" *ngIf="showIcon">
        <div class="edit-con">
            <ul>
                <li class="delete pointe" (click)="deleteCurrentFeature()"><i nz-icon nzType="delete" nzTheme="outline"></i></li>
                <li class="edit pointe" (click)="editAtt()"><i nz-icon nzType="edit" nzTheme="outline"></i></li>
                <li class="skin pointe" (click)="setStyle()"><i nz-icon nzType="skin" nzTheme="outline"></i></li>
            </ul>
        </div>
    </div>

    <div class="add-att" *ngIf="showFeatureAttEdit">
        <div class="feature-name">
            <input nz-input placeholder="请输入要素名称" [(ngModel)]="featureName"/>
        </div>
        <div class="add-featuse-att">
            <div (click)="addAttribute()" class="att pointe"><i nz-icon nzType="plus-square" nzTheme="outline"></i>绑定属性
            </div>
            <div (click)="addUser()" class="user pointe"><i nz-icon nzType="plus-square" nzTheme="outline"></i>绑定人员
            </div>
        </div>
        <div *ngIf="attArray">
            <table class="attr-table">
                <tr>属性列表</tr>
                <tr *ngFor="let att of attArray">
                    <td class="attr">{{att.attrName}}</td>
                    <td class="attr">{{att.attrValue}}</td>
                </tr>
            </table>
        </div>
        <div class="but">
            <button class="save" nz-button nzType="primary" (click)="saveattribute()">保存</button>
            <button nz-button nzType="default" (click)="cancelSet()">取消</button>
        </div>
    </div>
</div>


<!--绑定属性-->
<nz-modal [(nzVisible)]="showAttrForm" [nzTitle]="'绑定属性'" [nzFooter]="modalAttrFooter" (nzOnCancel)="handleAttrForm()">
    <form class="user-form" [formGroup]="AttrForm" *ngIf="AttrForm">
        <table class="info-box" cellspacing="0">
            <!--图层类型-->
            <tr style="margin-bottom: 20px">
                <td class="label-td">名称</td>
                <td class="input-td">
                    <input nz-input formControlName="attrName" placeholder="请输入属性名">
                </td>
            </tr>
            <!--图层名称-->
            <tr>
                <td class="label-td">属性值</td>
                <td class="input-td">
                    <input nz-input formControlName="attrValue" placeholder="请输入属性值">
                </td>
            </tr>
        </table>
    </form>
    <ng-template #modalAttrFooter>
        <button nz-button nzType="default" (click)="handleAttrForm()">取消</button>
        <button nz-button nzType="primary" (click)="submitAttrForm()" [nzLoading]="loading">确认</button>
    </ng-template>
</nz-modal>

<!--绑定人员-->
<nz-modal [(nzVisible)]="showUserForm" [nzTitle]="'绑定人员'" [nzFooter]="modalUserFooter" (nzOnCancel)="handleUserForm()">
    <form class="user-form" [formGroup]="userForm" *ngIf="userForm">
        <table class="info-box" cellspacing="0">
            <!--图层类型-->
            <tr >
                <td class="select-user">
                    <nz-checkbox-group
                        formControlName="userName"
                        [(ngModel)]="checkOptionsOne"
                        (ngModelChange)="log(checkOptionsOne)"
                    ></nz-checkbox-group>
                </td>
                <td class="select-user-List">
                    <p *ngFor="let seleUser of bindUserArr">{{seleUser.label}}</p>
                </td>
            </tr>
        </table>
    </form>
    <ng-template #modalUserFooter>
        <button nz-button nzType="default" (click)="handleUserForm()">取消</button>
        <button nz-button nzType="primary" (click)="submitUserForm()" [nzLoading]="loadingUser">确认</button>
    </ng-template>
</nz-modal>



<kylin-set-point-style
    *ngIf="showSetPointComponent"
    [showSetPointComponent]="showSetPointComponent"
    (setPointStyleFun) = setPointStyleFun($event)
    (hideComponent) = hideComponent($event)
    [selectcolor] = 'selectcolor'
></kylin-set-point-style>

<kylin-set-line-style
    *ngIf="showSetLineComponent"
    [showSetLineComponent]="showSetLineComponent"
    (setLineStyleFun) = setLineStyleFun($event)
    (hideComponent) = hideComponent($event)
    [selectcolor] = 'selectcolor'
></kylin-set-line-style>

<kylin-set-polygon-style
    *ngIf="showSetPolygonComponent"
    [showSetPolygonComponent]="showSetPolygonComponent"
    (setPolgonStyleFun) = setPolgonStyleFun($event)
    (hideComponent) = hideComponent($event)
    [selectcolor] = 'selectcolor'
></kylin-set-polygon-style>


